/*
*@date:20180902
*@author: wj 
*@description: 按YLJ的接口文档《测试接口文档.docx》，2.读取驾驶人照片信息 底层cmd：02C05
* DEPRECATED 不使用了
*/

<template>
    <div class="sys-page">
        <app-title :title="dialogTitle"></app-title>
        <app-notes>通过身份证明号码读取驾驶证照片基本信息</app-notes>
        <el-row>
            <el-col :span="20">
                <app-search>
                    <el-form :inline="true" :model="searchForm" :rules="searchRules" ref="searchForm">
                        <el-form-item prop="sfzmhm">
                            <el-input v-model="searchForm.sfzmhm" placeholder="请输入身份证明号码"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </app-search>
            </el-col>
        </el-row>    
            <el-table v-loading="loading" border :data="tableData" :row-class-name="tableRowClassName">
                <el-table-column label="照片" width="180">
                <template slot-scope="scope">
                    <img :src="scope.row.imageurl" width="100" height="100"/>
                </template>
                </el-table-column>
                <el-table-column label="姓名" width="180" prop="name"></el-table-column>
                <el-table-column label="姓别" width="180" prop="gender"></el-table-column>
                <el-table-column label="年龄" width="180" prop="age"></el-table-column>
                <el-table-column label="驾驶员信息" width="180" prop="driverInfo"></el-table-column>
            </el-table>
            <el-alert :title="errorMsg" type="warning" :closable="false" show-icon v-show="!reliable"> </el-alert>
    </div>
</template>
<style>
  .el-table .warning-row {
    background: #F08080;
  }

  .el-table .success-row {
    background:#f0f9eb;
  }
</style>

<script>
export default {
    data(){
        return {
            url: 'http://106.12.97.38:8088/trffweb/services/TmriOutAccess/queryObjectOut2.shtml',
            dialogTitle:"驾驶员照片查询",
            loading: false,
            tableData:[
                {
                    imageurl: '/static/logo.png',
                    name:'张三',
                    gender:'男',
                    age:'26',
                    driverInfo:'准驾车型C1 状态正常 到期时间2020-08-20'
                } ,
                {
                    imageurl: '/static/logo.png',
                    name:'李四',
                    gender:'男',
                    age:'28',
                    driverInfo:'准驾车型C2 状态正常 到期时间2022-01-20'
                } ,
            ],
            errorMsg:"您的信息有误，请联系管理员修改",
            reliable:true,
            searchForm: {
                xtlb: '01',
                jkxlh: '791F0909030617040815E6958E9DFF8FFC9E39343238575840746D72692E636E',
                jkid: '02C05',
                type: '1',
                sfzmhm: '' 
            },

             searchRules: {
                sfzmhm: [
                    { required:true, message: '请输入身份证号', trigger: 'blur' }
                ]
            }

       }
    },
    mounted(){
    },
    methods:{
        tableRowClassName({row, rowIndex}) {
          if(this.reliable === false){
            return 'warning-row';
          }else{
              return 'success-row'
          }
        },
        search(){
            this.$refs.searchForm.validate((valid)=>
            {
                if(valid){
                    this.HTTP.methods.apiGet(this.url, this.searchForm).then(res =>
                    {
                        if(res.status != 200){
                            console("driverPhotoQuery get request fail")
                            this.tableData.body = []
                            this.tableData.head = []
                            this.loading = true
                            
                        }else{
                            this.tableData.head = res.head
                            this.tableData.body = res.body
                            this.loading = false
                        }
                    })
                }
            })               
        }
    }
}
</script>

    
